<template>
  <div class="main">
    <h2>声明响应式状态</h2>

    <div class="group">
      <h3>ref() 函数</h3>
      <div class="content">
        <p>numC: {{ numC }}</p>
        <p>dataNumC: {{ dataNumC }}</p>
        <p>{{ dataBool ? dataStr : '阿里巴巴' }}</p>
        <p>
          <button type="button" @click="accNum">累加</button>
          <button type="button" @click="accNumC">普通变量累加</button>
          <button type="button" @click="accDataNumC">响应式变量累加</button>
        </p>
      </div>
    </div>

    <div class="group">
      <h3 @click="editAllRefData">ref()函数 - 深层响应性</h3>
      <div class="content">
        <p @click="accDataobjCount">dataObj1.count: {{ dataObj1.count }}</p>
        <p @click="pushDataObjStrArr">
          <ul>
            <li v-for="(item,index) in dataObj1.strArr" :key="index">{{ item }}</li>
          </ul>
        </p>
        <p @click="editSex">
          Username:{{ dataObj1.user.name }}
          sex:{{ dataObj1.user.sex }}

          <ul>
            <li v-for="(item,key,index) in dataObj1.user" :key="index"> key:{{ key }} - value:{{ item }}</li> 
          </ul>

        </p>
      </div>
    </div>




    <div class="group">
      <h3 @click="editAllReactiveData">reactive() 函数:将使对象本身具有响应性</h3>
      <div class="content">
        <p @click="accDataobjCount2">dataObj2.count: {{ dataObj2.count }}</p>
        <p @click="pushDataObjStrArr2">
          <ul>
            <li v-for="(item,index) in dataObj2.strArr" :key="index">{{ item }}</li>
          </ul>
        </p>
        <p @click="editSex2">
          Username:{{ dataObj2.user.name }}
          sex:{{ dataObj2.user.sex }}

          <ul>
            <li v-for="(item,key,index) in dataObj2.user" :key="index"> key:{{ key }} - value:{{ item }}</li> 
          </ul>

        </p>
      </div>
    </div>

    
  </div>
</template>

<script lang="ts">
export default {
  name: 'Study3StuDemo1'
}
</script>

<script setup lang="ts">
import { reactive, ref,type Ref } from 'vue'

// 一层 ref
let numC = 0
let dataNumC:Ref<number> = ref(0)
let dataStr = ref<string>('鸿蒙开发')
let dataBool = ref<boolean>(true)


interface Iuser {
  name:string
  sex:string
  age:number
}

interface IdataObj1<T> {
  count:number
  strArr:string[]
  user:T
}

// 深层响应性 ref
let dataObj1 = ref<IdataObj1<Iuser>>({
  count: 0,
  strArr: ['php', '刘强东', '马云', '马化腾', '任正非'],
  user: {
    name: '许家印',
    sex: 'nan',
    age: 42
  }
})





// 替换ref根级别的值
const editAllRefData = ()=>{
  dataObj1.value = {
  count: 100,
  strArr: ['java', '刘强东', '马云', '马化腾', '任正非'],
  user: {
    name: '周志超',
    sex: 'nv',
    age: 11
  }
}
}

// reactive
let dataObj2:IdataObj1<Iuser> = reactive({
  count: 0,
  strArr: ['php', '刘强东', '马云', '马化腾', '任正非'],
  user: {
    name: '许家印',
    sex: 'nan',
    age: 42,
    aihao:{}
  }
})



// 因为ref 的引用值是用 reactive 包裹的，所以ref具有深层响应性
// ref的value对应的是一个 reactive 包裹的响应式对象
console.log(dataObj1.value,'#dataObj1.value'); // 

console.log(dataObj2,'#dataObj2');

console.log(dataObj2.user,'#User');

console.log(dataObj2.strArr,'#strArr');



const proxy:any = reactive({})

const raw = {}
proxy.nested = raw
proxy.nested2 = 33
proxy.nested3 = [2,33,3]
console.log(proxy.nested === raw) // false

console.log(proxy.nested,'proxy.nested ');

console.log(proxy.nested2,'proxy.nested2 ');

console.log(proxy.nested3,'proxy.nested3 ');



const count = ref(0)
const state = reactive({
  count:count
})

console.log(state.count) // 0

state.count = 33
console.log(count.value) // 1



// 替换 reactive 根级别的值
const editAllReactiveData = ()=>{

  dataObj2 = {
  count: 100,
  strArr: ['java', '刘强东', '马云', '马化腾', '任正非'],
  user: {
    name: '周志超',
    sex: 'nv',
    age: 11
  }
}

console.log(dataObj2,'dataObj2');


}


const accDataobjCount2 = ()=>{
  // 不需要使用 .value ,因为本身具有响应性
  dataObj2.count ++

}
const pushDataObjStrArr2 = ()=>{
  dataObj2.strArr.push('万梓良')
}

const editSex2 = ()=>{
 dataObj2.user.sex = '女'
}



const accDataobjCount = ()=>{
  dataObj1.value.count ++
}

const pushDataObjStrArr = ()=>{
  dataObj1.value.strArr.push('张柏芝')
}

const editSex = ()=>{
  dataObj1.value.user.sex = '女'
}

// 普通变量的累加
const accNumC = () => {
  numC++
  console.log(numC, 'numC')
}

// 响应式变量累加
const accDataNumC = () => {
  dataNumC.value++
  console.log(dataNumC.value, ' dataNumC.value')
}

const accNum = () => {
  // 响应式的原理：只要有状态变量改变，程序都最后就会触发UI的渲染，非状态变量也会别感染
  dataNumC.value++
  numC++

  console.log(numC, 'numC')
  console.log(dataNumC.value, ' dataNumC.value')
}
</script>

<style lang="scss" scoped>
@import '@/assets/groupDemo.scss';

.active {
  color: darkorange;
}
.text-danger {
  background-color: red;
}

.text-success {
  background-color: green;
}

.active-new {
  font-size: 22px;
}
</style>
